<template>
    <div class="qilin-QilinCalendar">
        <QilinExplain title="日历组件" date="2024-04-09">
            <template v-slot:content>
                <QilinCalendar
                    ref="QilinCalendarRef"
                    :showChangeArrow="true"
                    backgroundColor="transparent"
                    dateActiveColor="linear-gradient( 180deg, #82B4FF 0%, #0066FF 100%)"
                    :sundayIndex="6"
                    showSelectedWeek
                    @selectDate="selectDate"
                ></QilinCalendar>
                <CodeMirror :codeValue="getCodeValue"></CodeMirror>
            </template>
        </QilinExplain>
    </div>
</template>

<script setup>
import QilinCalendar from "./QilinCalendar.vue";

/*
    数据变量定义区域
*/


/*
    计算属性等代码区域
*/
const getCodeValue=computed(()=>{
    return `
        // html部分
        <template>
            <div class="qilin-QilinCalendar" :style="{
                backgroundColor:propsValue.backgroundColor || '#fff'
            }">
                <div class="qilin-QilinCalendar-header">
                    <div class="qilin-QilinCalendar-header-title">
                        <span class="arrow-left" @click="switchPrev(swiperMode)"
                            v-if="propsValue.showChangeArrow"
                        >{{"<"}}</span>
                        <span>{{getAssignDateInfo(false,0)+"年"+getAssignDateInfo(false,1)+"月"}}</span>
                        <span class="arrow-right" @click="switchNext(swiperMode)"
                            v-if="propsValue.showChangeArrow"
                        >{{">"}}</span>
                    </div>
                    <slot name="header"></slot>
                </div>
                <div class="qilin-QilinCalendar-week">
                    <div class="qilin-QilinCalendar-week-item"
                        v-for="(item,index) in week" :key="index"
                    >{{item}}</div>
                </div>
                <div class="qilin-QilinCalendar-date">
                    <div
                        v-if="swiperMode === 'open' "
                        class="qilin-QilinCalendar-date-swiper"
                        :style="{
                            height:swiperHeight('open')
                        }"
                    >
                        <div class="qilin-QilinCalendar-date-swiper-item">
                            <CalendarDay
                                :dates="calendarSwiperDates[current]"
                                :cellHeight="cellHeight"
                                :dateActiveColor="dateActiveColor"
                                :swiperMode="swiperMode"
                                @selectDate="selectDate"
                            ></CalendarDay>
                        </div>
                    </div>
                    <div
                        v-else
                        class="qilin-QilinCalendar-date-swiper"
                        :style="{
                            height:swiperHeight('close')
                        }"
                    >
                        <div class="qilin-QilinCalendar-date-swiper-item">
                            <CalendarDay
                                :dates="calendarSwiperShrinkDates[shrinkCurrent]"
                                :cellHeight="cellHeight"
                                :dateActiveColor="dateActiveColor"
                                :swiperMode="swiperMode"
                                @selectDate="selectShrinkDate"
                            ></CalendarDay>
                        </div>
                    </div>
                </div>
                <div class="qilin-QilinCalendar-footer" v-if="propsValue.showFooter">
                    <img src="./arrow.png" alt=""
                        :class="{ down:swiperMode === 'close' }"
                        @click="swiperMode = swiperMode === 'open' ? 'close' : 'open' "
                    />
                </div>
            </div>
        </template>
        // js部分
        import Qilin from "qilin-utils";
        import CalendarDay from "./calendarDay.vue";

        /*
            数据变量定义区域
        */
        let today=ref(Qilin.Date.formatDate(new Date(),"yyyy-MM-dd")); //今天日期
        let selectedDate=ref(null); //选中的日期
        let week=reactive([]); //周-数组
        let swiperMode=ref(propsValue.mode); //日历轮播显示模式，展开还是收缩
        let current=ref(1); //当前日历轮播默认显示索引，三个日历轮播块，默认显示第二个
        let calendarSwiperDates=ref([]); //日历轮播的日期信息-展开时
        let dateCache=reactive({}); //日期缓存
        let dateActive=ref(-1); //日期选中索引
        let swiperByClick=ref(false); //是否通过点击上月份或下月份的日期进行轮播切换
        let shrinkCurrent=ref(1); //缩放时日历轮播默认显示索引
        let calendarSwiperShrinkDates=ref([]); //日历轮播的日期信息-收缩时
        let dateClick=ref(false); //是否进行了日期的点击选择
        let emitTimer=ref(null); //日期改变向父级传递当前选中日期的计时器
        let selectedWeek=ref([]); //当前选中日期所在周数据


        /*
            计算属性等代码区域
        */
        // 接收来自父组件的传参
        const propsValue=defineProps({
            defaultSelectedDate:{ //默认选中日期
                type:String | null,
                default:null
            },
            sundayIndex:{ //周日所在索引，0表示第一个，6表示最后一个
                type:Number,
                default:0
            },
            mode:{ //日历模式，展开还是收缩，默认展开
                type:String,
                default:"open"
            },
            duration:{ //轮播动画时长
                type:Number,
                default:300
            },
            cellHeight:{ //一列的宽高
                type:Number,
                default:50
            },
            dateActiveColor:{ //日期选中的颜色
                type:String,
                default:"#1577FF"
            },
            changeSetDefault:{ //月份切换时是否显示该月的1号高亮还是当前的日期数字高亮
                type:Boolean,
                default:true
            },
            showChangeArrow:{ //是否显示日期前后切换箭头，默认显示
                type:Boolean,
                default:true
            },
            backgroundColor:{ //日历的背景颜色，默认#fff
                type:String,
                default:"#fff"
            },
            showFooter:{ //是否显示日历底部区域，默认不显示
                type:Boolean,
                default:false
            },
            showSelectedWeek:{ //是否高亮当前周，默认不高亮
                type:Boolean,
                default:false
            }
        });
        // 暴露父组件自定义方法
        const emits=defineEmits(["selectDate"]);

        // 获取指定的日期信息-
        // isCurDate：表示是否获取当天的信息还是选中日期的信息
        // type：0表示获取年份、1表示获取月份、2表示获取日期
        const getAssignDateInfo=computed(()=>{
            return (isCurDate,type)=>{
                return (isCurDate ? today.value : selectedDate.value).split("-")[type] * 1;
            };
        });
        // 返回轮播图高度方法
        const swiperHeight=computed(()=>{
            return (mode)=>{
                const normalHeight=(calendarSwiperDates.value[current.value] || []).length / 7 * (propsValue.cellHeight+10) + "px";
                const shrinkHeight=propsValue.cellHeight+10+"px";
                // console.log(normalHeight,shrinkHeight,propsValue.cellHeight);
                return mode === "open" ? normalHeight : shrinkHeight;
            };
        });
        // 监听日历轮播切换的索引current-展开时
        watch(current,(newValue,oldValue)=>{
            if(newValue === 0 && oldValue === 2){ //日历右滑
                swiperChange(1);
                return;
            };
            if(newValue ===2 && oldValue === 0){ //日历左滑
                swiperChange(-1);
                return;
            };
            if(newValue > oldValue){ //右滑
                swiperChange(1);
            }else{ //左滑
                swiperChange(-1);
            };
        });
        // 监听日历轮播切换的索引shrinkCurrent-收缩时
        watch(shrinkCurrent,(newValue,oldValue)=>{
            if(newValue === 0 && oldValue === 2){ //日历右滑
                shrinkSwiperChange(1);
                return;
            };
            if(newValue ===2 && oldValue === 0){ //日历左滑
                shrinkSwiperChange(-1);
                return;
            };
            if(newValue > oldValue){ //右滑
                shrinkSwiperChange(1);
            }else{ //左滑
                shrinkSwiperChange(-1);
            };
        });
        // 监听日历轮播显示模式
        watch(swiperMode,(newValue,oldValue)=>{
            if(newValue === "close"){ //若日历收缩时则初始化日历收缩时的日期数据
                initCalendarShrinkSwiperDates();
            };
        });
        // 监听选中日期变量
        watch(selectedDate,(newValue,oldValue)=>{
            // console.log(newValue,oldValue);
            if(newValue && (oldValue === null || dateClick.value )){ //日历点击选择时直接返回或初始化进入时
                emitDate();
                dateClick.value=false;
            }else{ //其他情况做防抖处理--左滑右滑时的自动默认选中等情况
                if(emitTimer.value !== null){
                    clearTimeout(emitTimer.value);
                };
                emitTimer=setTimeout(()=>{
                    emitDate();
                },propsValue.duration+200);
            };
        },{deep:true});


        /*
            逻辑脚本代码区域
        */
        // 初始化数据
        const initData=async ()=>{
            if(selectedDate.value === null){ //默认选中日期为当天
                selectedDate.value=propsValue.defaultSelectedDate || today.value;
            };
            initWeek(); //初始化要显示的周数
            initCalendarSwiperDates(); //初始化展开时的日历轮播日期信息
            // emitDate();
            if(swiperMode.value === "close"){ //解决swiperMode初始化为收缩时没有初始化日历收缩轮播日期信息
                initCalendarShrinkSwiperDates();
            };
        };
        // 初始化周数事件监听
        const initWeek=()=>{
            const normalWeek=["日","一","二","三","四","五","六"];
            const sIndex=propsValue.sundayIndex < 0 ? 0 :
                propsValue.sundayIndex >= normalWeek.length ? normalWeek.length : propsValue.sundayIndex;
            normalWeek.unshift(...normalWeek.slice(-sIndex));
            normalWeek.length=7;
            week=normalWeek;
        };
        // 初始化展开时的日历轮播日期信息事件监听
        const initCalendarSwiperDates=async(cb)=>{
            const year=getAssignDateInfo.value(false,0);
            const month=getAssignDateInfo.value(false,1);
            const prevYear=month === 1 ? year-1 : year; //获取上月所在年份
            const prevMonth=month === 1 ? 12 : month-1; //获取上月份
            const nextYear=month === 12 ? year+1 : year; //获取下月所在年份
            const nextMonth=month === 12 ? 1 : month+1; //获取下月份
            const cur=generateCalendar(year,month); //生成当月显示日历数据
            const prev=generateCalendar(prevYear,prevMonth); //生成上月日历数据
            const next=generateCalendar(nextYear,nextMonth); //生成下月日历数据
            // 根据当前轮播日历索引current来判断相邻的轮播存放那些日历数据
            if(current.value === 0){
                calendarSwiperDates.value=[cur,next,prev];
            }else if(current.value === 1){
                calendarSwiperDates.value=[prev,cur,next];
            }else if(current.value === 2){
                calendarSwiperDates.value=[next,prev,cur];
            };
            getSelectedWeek();
            // const res=await getCalendarInfo(year,month);
            // const prevRes=await getCalendarInfo(prevYear,prevMonth);
            // const nextRes=await getCalendarInfo(nextYear,nextMonth);
            // // console.log(res,prevRes,nextRes,"====");
            // calendarSwiperDates.value[current.value].forEach((item)=>{
            // 	if(item.year === prevYear && item.month === prevMonth){
            //         prevRes.forEach((item1)=>{
            //             if(Qilin.Date.formatDate(item1,"d") == item.date){
            //                 item.status=1;
            //             };
            //         });
            // 	}else if(item.year === year && item.month === month){
            // 		res.forEach((item1)=>{
            //             if(Qilin.Date.formatDate(item1,"d") == item.date){
            //                 item.status=1;
            //             };
            //         });
            // 	}else if(item.year === nextYear && item.month === nextMonth){
            // 		nextRes.forEach((item1)=>{
            //             if(Qilin.Date.formatDate(item1,"d") == item.date){
            //                 item.status=1;
            //             };
            //         });
            // 	};
            // });
            // console.log(calendarSwiperDates.value);
            swiperByClick.value=false;
            // 初始化日期信息完毕后执行回调函数
            cb && cb();
        };
        // 获取当前选中日期所在周数据事件监听
        const getSelectedWeek=()=>{
            // 计算当前选中日期处于日历中的哪一行索引
            const curCalendarSwiperDates=calendarSwiperDates.value[current.value]; //当月的日期数据
            let line=Math.floor(curCalendarSwiperDates.map((item)=>{
                return item.type === "cur" ? item.date : -1 ;
            }).indexOf(getAssignDateInfo.value(false,2)) / 7);
            if(propsValue.showSelectedWeek){
                selectedWeek.value=[];
                calendarSwiperDates.value[current.value].forEach((item,index)=>{
                    if(line*7 <= index && (line+1)*7 > index){
                        item.isSelectedWeek=true;
                        selectedWeek.value.push(item);
                    }else{
                        item.isSelectedWeek=false;
                    };
                });
            };
            // console.log(line,calendarSwiperDates.value[current.value]);
        };
        // 生成展开的日历数据事件监听
        const generateCalendar=(year,month)=>{
            // console.log("当前展示的年月日",getAssignDateInfo.value(true,0),
            // 	getAssignDateInfo.value(true,1),getAssignDateInfo.value(true,2));
            // console.log(year,month,"========");
            // const res=await getCalendarInfo(year,month);
            let calendarDate=[];
            if(dateCache[\`$year-$month\`]){ //先获取缓存里面有无该月的日期数据
                calendarDate=Qilin.Common.deepCopy(dateCache[\`$year-$month\`],[]);
            }else{ //进行月份日期的计算
                const monthDates=new Date(year,month,0).getDate(); //获取此月份总天数
                const normalWeek=["一","二","三","四","五","六","日"]; //正常周数
                const monthFirstDay=normalWeek[new Date(year,month-1,0).getDay()]; //获取上月最后一天为星期几
                const monthFirstDayIndex=week.indexOf(monthFirstDay); //计算上月最后一天在日历周数中的索引，用以填充上月后几天
                // 若上月最后一天在日历中不是第一个位置，则需要进行填充
                if(monthFirstDayIndex !== 0){
                    const prevYear=month === 1 ? year-1 : year; //获取上月所在年份
                    const prevMonth=month === 1 ? 12 : month-1; //获取上月份
                    // const prevRes=await getCalendarInfo(prevYear,prevMonth);
                    const prevMonthDates=new Date(year,month-1,0).getDate(); //获取上月总天数
                    for(let i=0;i<monthFirstDayIndex;i++){ // 填充上个月在本月显示的数据
                        const item={
                            year:prevYear,
                            month:prevMonth,
                            date:prevMonthDates-i,
                            isToday:theDateIsToday({year:prevYear,month:prevMonth,date:prevMonthDates-i}),
                            // status:prevRes[prevMonthDates-i],
                            type:"prev"
                        };
                        calendarDate.unshift(item);
                    };
                };
                // 循环生成本月所有日期
                for(let i=1;i<=monthDates;i++){
                    const item={
                        year,
                        month,
                        date:i,
                        isSelected:false,
                        isToday:theDateIsToday({year,month,date:i}),
                        // status:res[i],
                        type:"cur"
                    };
                    calendarDate.push(item);
                };
                const residue=calendarDate.length % 7; //若能被7整除，则不需要填充下月数据
                if(residue !== 0){ //若不能被7整除，则需要填充下月的前几天数据
                    const nextYear=month === 12 ? year+1 : year; //获取下月所在年份
                    const nextMonth=month === 12 ? 1 : month+1; //获取下月份
                    // const nextRes=await getCalendarInfo(nextYear,nextMonth);
                    for(let i=1;i<=7-residue;i++){
                        const item={
                            year:nextYear,
                            month:nextMonth,
                            date:i,
                            isToday:theDateIsToday({year:nextYear,month:nextMonth,date:i}),
                            // status:nextRes[i],
                            type:"next"
                        };
                        calendarDate.push(item);
                    };
                };
                // 添加至缓存
                dateCache[\`$year-$month\`]=Qilin.Common.deepCopy(calendarDate,[]);
            };
            // 高亮当月选中日-可能是默认的每月1号亦可能是设定的每月的当前日，随changeSetDefault的值而决定；
            // -也可能是跨月选择了日期来高亮；也可能是左滑或右滑跨月了来使默认的首日高亮；
            if(year === getAssignDateInfo.value(false,0) && month === getAssignDateInfo.value(false,1)){
                for(let i=0;i<calendarDate.length;i++){
                    if(calendarDate[i].type === "cur" && calendarDate[i].date === getAssignDateInfo.value(false,2)){
                        calendarDate[i].isSelected=true;
                        dateActive.value=i;
                        break;
                    };
                };
            };
            return calendarDate;
        };
        // 判断日期是否为今天事件监听
        const theDateIsToday=(item)=>{
            if(item.year+"-"+item.month+"-"+item.date ===
                getAssignDateInfo.value(true,0)+"-"+getAssignDateInfo.value(true,1)+"-"+getAssignDateInfo.value(true,2)
            ){
                return true;
            }else{
                return false;
            };
        };
        // 初始化收缩时的日历轮播日期信息
        const initCalendarShrinkSwiperDates=(swiperChangeType)=>{ //右滑该参数为1，左滑该参数为-1
            let line=null;
            const curDateLine=Math.floor(dateActive.value / 7); //选中日期在哪一行索引
            // console.log(dateActive.value,curDateLine,current.value,swiperChangeType);
            // 若往右滑没到下一个月中还在当前月；若往左滑没到上一个月还在当前月；无参数时表示到了下一个月或上一个月自执行一次
            if(!swiperChangeType ||
                (swiperChangeType === -1 && curDateLine !== 0 &&
                    calendarSwiperDates.value[current.value][(curDateLine-1)*7].type === "cur") ||
                (swiperChangeType === 1 && curDateLine+1 !== calendarSwiperDates.value[current.value].length / 7)
            ){
                // 计算当前选中日期处于日历中的哪一行索引
                const curCalendarSwiperDates=calendarSwiperDates.value[current.value]; //当月的日期数据
                line=Math.floor(curCalendarSwiperDates.map((item)=>{
                    return item.type === "cur" ? item.date : -1 ;
                }).indexOf(getAssignDateInfo.value(false,2)) / 7);
                if(swiperChangeType){ //收缩日历滑动组件需要进行日期的选中处理
                    calendarSwiperDates.value[current.value][dateActive.value].isSelected=false; //清除当前选中日期的选中状态
                    dateActive.value=line*7; //重新计算日期选中高亮并把下一个日期进行选中
                    calendarSwiperDates.value[current.value][dateActive.value].isSelected=true;
                };
            }else{ //若往右滑进入了下一个月；若往左滑进入了上一个月；
                calendarSwiperDates.value[current.value][dateActive.value].isSelected=false; //清除当前选中日期的选中状态
                // 计算下一个月或上一个月的日期轮播数据，通过改变展开时日历轮播索引来切换
                let currentNum=current.value+swiperChangeType;
                currentNum=currentNum > 2 ? 0 : currentNum < 0 ? 2 : currentNum;
                current.value=currentNum;
                // 计算当前选中日期处于日历中的哪一行索引
                const curCalendarSwiperDates=calendarSwiperDates.value[current.value]; //上个月或下个月的日期数据
                line=Math.floor(curCalendarSwiperDates.map((item)=>{
                    return item.type === "cur" ? item.date : -1 ;
                }).indexOf(getAssignDateInfo.value(false,2)) / 7);
                dateActive.value=line*7; //重新计算日期选中高亮并把下一个日期进行选中
                calendarSwiperDates.value[current.value][dateActive.value].isSelected=true;
            };
            const cur=generateShrinkCalendar(0,line);
            const prev=generateShrinkCalendar(-1,line);
            const next=generateShrinkCalendar(1,line);
            // console.log(line,cur,prev,next,shrinkCurrent.value)
            // 根据当前轮播日历缩放时索引shrinkCurrent来判断相邻的轮播存放那些日历数据
            if(shrinkCurrent.value === 0){
                calendarSwiperShrinkDates.value=[cur,next,prev];
            }else if(shrinkCurrent.value === 1){
                calendarSwiperShrinkDates.value=[prev,cur,next];
            }else if(shrinkCurrent.value === 2){
                calendarSwiperShrinkDates.value=[next,prev,cur];
            };
            // console.log(calendarSwiperShrinkDates.value)
        };
        // 生成收缩的日历数据事件监听
        const generateShrinkCalendar=(type,line)=>{
            // 返回当前这周的日期数据
            if(type === 0){
                return calendarSwiperDates.value[current.value].slice(line*7,(line+1)*7);
            }else if(type === -1){ //返回上一周的日期数据
                // 当前选中的日期是否位于第一行
                if(line === 0){
                    // 计算上个月的日历轮播索引值
                    const prevIndex=current.value === 0 ? 2 : current.value - 1 ;
                    // 获取上个月的日期数据
                    const prevCalendarSwiperDates=calendarSwiperDates.value[prevIndex];
                    // 获取上个月的日历行数
                    const prevCalendarSwiperDatesLine=prevCalendarSwiperDates.length / 7;
                    // console.log(current.value,prevIndex);
                    if(calendarSwiperDates.value[current.value][0].type === "prev"){ //返回上个月的倒数第二行
                        return prevCalendarSwiperDates.slice((prevCalendarSwiperDatesLine-2)*7,(prevCalendarSwiperDatesLine-1)*7);
                    }else{ //返回上个月的倒数第一行
                        return prevCalendarSwiperDates.slice((prevCalendarSwiperDatesLine-1)*7);
                    };
                }else{
                    return calendarSwiperDates.value[current.value].slice((line-1)*7,line*7);
                };
            }else if(type === 1){ //返回下一周的日期数据
                // 获取当前日历月份行数
                const curMonthMaxLine=calendarSwiperDates.value[current.value].length / 7;
                if(line === curMonthMaxLine-1){ //当前选中的日期是否位于最后一行，若是则切换到下一月
                    // 计算下个月的日历轮播索引值
                    const nextIndex=current.value === 2 ? 0 : current.value + 1;
                    // 获取下个月的日期数据
                    const nextCalendarSwiperDates=calendarSwiperDates.value[nextIndex];
                    // 获取下个月的日历行数
                    const nextCalendarSwiperDatesLine=nextCalendarSwiperDates.length / 7;
                    // 若下个月的日期数据中的最后一天的type为next，则返回下个月的第二行
                    if(calendarSwiperDates.value[current.value][calendarSwiperDates.value[current.value].length-1].type === "next"){
                        return nextCalendarSwiperDates.slice(7,14);
                    }else{ //返回下个月的第一行
                        return nextCalendarSwiperDates.slice(0,7);
                    };
                }else{
                    return calendarSwiperDates.value[current.value].slice((line+1)*7,(line+2)*7);
                };
            };
        };
        // 日历轮播滑动切换事件监听-展开时
        const swiperChange=(type)=>{ //type为1表示右滑，为-1表示左滑
            // 如果是通过点击上个月或下个月中的某个日期进行切换，则不需要默认选中下个月的1号，直接选中点击的那个日期
            if(!swiperByClick.value && swiperMode.value === "open"){
                getPrevOrNextDate(type);
            };
            setTimeout(()=>{ //设置定时器是为了防止轮播切换时生成数据造成页面卡顿
                initCalendarSwiperDates(()=>{ //初始化日历轮播日期信息
                    // 若在日历收缩时滑动进入了下个月或上个月触发或者点击进入上个月或下个月时触发
                    swiperMode.value === "close" && initCalendarShrinkSwiperDates();
                });
            },swiperMode.value === "open" ? propsValue.duration : 0);
        };
        // 日历轮播滑动切换事件监听-收缩时
        const shrinkSwiperChange=(type)=>{ //type为1表示右滑，为-1表示左滑
            // 默认高亮选中下一周或上一周的开始日
            getPrevOrNextStartDate(type);
            setTimeout(()=>{ //设置定时器是为了防止轮播切换时生成数据造成页面卡顿
                initCalendarShrinkSwiperDates(type); //初始化日历轮播日期信息
            },propsValue.duration);
        };
        // 获取上个月或下个月的一号日期事件监听
        const getPrevOrNextDate=(type)=>{
            const year=getAssignDateInfo.value(false,0);
            let month=getAssignDateInfo.value(false,1);
            month=month+type;
            const curActiveDate=getAssignDateInfo.value(false,2);
            const maxDate=new Date(year,month,0).getDate(); //获取上个月或下个月有多少天
            const date=propsValue.changeSetDefault ? 1 : curActiveDate > maxDate ? maxDate : curActiveDate;
            selectedDate.value=Qilin.Date.formatDate(new Date(year,month-1,date),"yyyy-MM-dd");
        };
        // 获取上一周或下一周的第一天日期事件监听
        const getPrevOrNextStartDate=(type)=>{
            const date=calendarSwiperShrinkDates.value[shrinkCurrent.value][0];
            // 默认高亮选中下一周或上一周的开始日
            selectedDate.value=Qilin.Date.formatDate(new Date(date.year,date.month-1,date.date),"yyyy-MM-dd");
        };
        // 点击选择某个日期事件监听-展开时
        const selectDate=(dateItem,dateIndex)=>{
            if(dateItem.isSelected){ //若点击了已选中的则不做处理
                return false;
            };
            if(dateItem.type !== "cur"){ //若在当前显示日历轮播月份中点击了上个月或下个月的某个日期
                if(dateItem.type === "prev"){ //若点击了上个月的日期，则滑到上个月
                    current.value=current.value === 0 ? 2 : current.value - 1;
                }else if(dateItem.type === "next"){ //若点击下个月的日期，则滑到下个月
                    current.value=current.value === 2 ? 0 : current.value + 1;
                };
                // 将选中日期赋值为当前点击的日期
                selectedDate.value=Qilin.Date.formatDate(new Date(dateItem.year,dateItem.month-1,dateItem.date),"yyyy-MM-dd");
                swiperByClick.value=true;
            }else{ //若点击的当月份中的某一个日期
                calendarSwiperDates.value[current.value][dateActive.value].isSelected=false; //清除当前选中的日期
                // 第一种写法
                // calendarSwiperDates.value[current.value].forEach((item,index)=>{
                // 	if(item.date === dateItem.date && item.type === dateItem.type){
                // 		dateActive.value=index;
                // 		item.isSelected=true;
                // 		selectedDate.value=Qilin.Date.formatDate(new Date(item.year,item.month-1,item.date),"yyyy-MM-dd");
                // 		dateClick.value=true;
                // 	};
                // });
                // 第二种写法
                dateActive.value=dateIndex; //获取当前选择日期的所在当前轮播显示日历中的索引
                const date=calendarSwiperDates.value[current.value][dateActive.value]; //找到该索引对应的日期信息
                date.isSelected=true;
                selectedDate.value=Qilin.Date.formatDate(new Date(date.year,date.month-1,date.date),"yyyy-MM-dd");
                dateClick.value=true;
            };
            getSelectedWeek();
        };
        // 点击选择某个日期事件监听-收缩时
        const selectShrinkDate=(dateItem,dateIndex)=>{
            if(dateItem.isSelected){ //已经选中的则不做处理
                return false;
            };
            dateClick.value=true;
            if(dateItem.type !== "cur"){ //若在当前日历轮播周中点击了上个月或下个月的某个日期
                if(dateItem.type === "prev"){ //若点击上个月中的某个日期，则滑到上个月
                    current.value=current.value === 0 ? 2 : current.value - 1;
                }else if(dateItem.type === "next"){ //若点击下个月中的某个日期，则滑到下个月
                    current.value=current.value === 2 ? 0 :current.value + 1;
                };
                dateActive.value=dateIndex;
                // 将选中日期赋值为当前点击的日期
                selectedDate.value=Qilin.Date.formatDate(new Date(dateItem.year,dateItem.month-1,dateItem.date),"yyyy-MM-dd");
            }else{ //若点击的是当周中的某一日期
                calendarSwiperDates.value[current.value][dateActive.value].isSelected=false; //清除当前选中的日期
                const dateActiveLine=Math.floor(dateActive.value / 7); //获取之前的选中日期在哪一行索引
                dateActive.value=dateIndex+dateActiveLine*7; //获取当前选择日期的所在当前轮播显示日历中的索引
                const date=calendarSwiperDates.value[current.value][dateActive.value]; //找到该索引对应的日期信息
                date.isSelected=true;
                selectedDate.value=Qilin.Date.formatDate(new Date(date.year,date.month-1,date.date),"yyyy-MM-dd");
            };
        };
        // 点击左箭头图标事件监听-切换到上一周或上一个月
        const switchPrev=(mode)=>{
            if(mode === "open"){ //展开时--切换到上一个月
                current.value = current.value === 0 ? 2 : current.value - 1 ;
            }else if(mode === "close"){ //收缩时--切换到上一周
                shrinkCurrent.value = shrinkCurrent.value === 0 ? 2 : shrinkCurrent.value - 1 ;
            };
        };
        // 点击右箭头图标事件监听-切换到下一周或下一个月
        const switchNext=(mode)=>{
            if(mode === "open"){ //展开时--切换到下一个月
                current.value = current.value === 2 ? 0 : current.value + 1 ;
            }else if(mode === "close"){ //收缩时--切换到下一周
                shrinkCurrent.value = shrinkCurrent.value === 2 ? 0 : shrinkCurrent.value + 1 ;
            };
        };
        // 向父组件传递当前选中数据
        const emitDate=()=>{
            const {year,month,date,type,status}=calendarSwiperDates.value[current.value][dateActive.value];
            // console.log(calendarSwiperDates.value[current.value][dateActive.value]);
            const obj={
                year,
                month,
                date,
                selectedDate:selectedDate.value,
                status
            };
            const weekInfo=selectedWeek.value.map((item)=>{
                return {
                    ...item,
                    day:item.date,
                    label:Qilin.Date.formatDate(new Date(item.year,item.month-1,item.date),"weekDetail"),
                    date:Qilin.Date.formatDate(new Date(item.year,item.month-1,item.date),"MM")+"-"+Qilin.Date.formatDate(new Date(item.year,item.month-1,item.date),"dd"),
                    active:item.date === date
                };
            });
            emits("selectDate",obj,weekInfo);
        };
        // 获取指定月份打卡信息数据
        const getCalendarInfo=(year,month)=>{
            return new Promise((resolve,reject)=>{
                // getCalendarData({
                //     personId:"1656128908179632130",
                //     startTime:Qilin.Date.formatDate(new Date(year,month-1,1,0,0,0)),
                //     endTime:Qilin.Date.formatDate(new Date(year,month,0,23,59,59))
                // }).then((res)=>{
                //     if(res.code === 200){
                //         // console.log(res.data);
                //         resolve(res.data);
                //     };
                // });
            });
        };


        /*
            生命周期等代码区域
        */
        initData();
        // 暴露子组件方法及属性
        defineExpose({
            initData,
            switchPrev:()=>{
                switchPrev(swiperMode.value)
            },
            switchNext:()=>{
                switchNext(swiperMode.value)
            },
            selectedWeek:selectedWeek.value
        });
    `
})


/*
    逻辑脚本代码区域
*/
// 选中日期事件监听
const selectDate=(obj,week)=>{
    // console.log(obj,week);
};


/*
    生命周期等代码区域
*/

</script>

<style lang="scss" scoped>
.qilin-{

}
</style>
